{extend name="main" /}

{block name="css"}
<style>
    .layui-form-switch{margin-top: 0;}
</style>
{/block}

{block name="body"}
{include file="breadcrumb" /}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="btn-box">
                <a href="{:url('add')}" class="layui-btn layui-btn-sm xn_open" title="添加权限">添加权限</a>
                <a href="{:url('addBatch')}" class="layui-btn layui-btn-sm layui-btn-primary xn_open" title="按规则导入权限">按规则导入权限</a>
            </div>
            <form action="{:url('sort')}" method="post">
                <table class="layui-table" style="margin-top: 0;">
                    <tr>
                        <th style="width: 45px;">排序</th>
                        <th>权限名</th>
                        <th>权限</th>
                        <th>菜单显示</th>
                        <th width="140">操作</th>
                    </tr>

                    <tbody>
                    <?php
            $_pid = 0;
        ?>
                    {foreach name="list" item="vo"}
                    <?php
            if( $vo['pid']==0 ) $_pid = $vo['id'];
        ?>
                    <tr {if condition="$vo['pid'] neq 0"}class="cate_{$_pid}" style="display: none"{/if} >
                    <td><input type="text" name="{$vo.id}" placeholder="排序" autocomplete="off" class="layui-input" value="{$vo.sort}" style="width: 45px;height:24px;line-height:24px;color: #999;"></td>
                    <td>
                        {if condition="$vo['pid'] eq 0"}
                        <i class="layui-icon layui-icon-addition" id="showHide_{$_pid}" onclick="showHide({$_pid})" style="cursor: pointer"></i>
                        {/if}
                        {$vo._name}
                    </td>
                    <td>{$vo.name}</td>
                    <td class="layui-form">
                        <input type="checkbox" lay-verify="required" lay-filter="is_menu" name="is_menu" data-id="{$vo.id}"
                               lay-skin="switch" lay-text="显示|隐藏" value="1" {if condition="$vo['is_menu'] eq 1"}checked{/if} >
                    </td>
                    <td>
                        <a href="{:url('edit',array('id'=>$vo['id']))}" title="{$vo.title}" class="layui-btn layui-btn-sm xn_open">
		                    修改
		                </a>
		                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm dropdown-btn" data-id="{$vo.id}">
		                    <span>更多</span>
		                    <i class="layui-icon layui-icon-down layui-font-12"></i>
		                </button>
                    </td>
                    </tr>
                    {/foreach}
                    <tr>
                        <td colspan="8">
                            <button type="submit" class="layui-btn layui-btn-warm layui-btn-sm">排序</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </form>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
    layui.form.on('switch(is_menu)', function(data){
        //layer.tips('开关checked：'+ (this.checked ? 'true' : 'false'), data.othis)
        var val = this.checked ? 1 : 0;
        var id = $(this).attr('data-id');
        var url = "{:url('edit')}";
        $.post(url,{id:id,is_menu:val},function (res) {
            console.log(res);
            layer.tips(res.msg, data.othis);
        },'json')
    });


    //缓存展开的菜单状态
    var pids = [];
    function showHide(pid) {
        var classname = $('#showHide_'+pid).attr('class');
        if( classname != null && classname.indexOf("layui-icon-addition") != -1  ) {
            //隐藏
            $('#showHide_'+pid).removeClass('layui-icon-addition').addClass('layui-icon-subtraction')
            pids.push(pid);
            sessionStorage.setItem("pids", pids);
        } else {
            //展开
            $('#showHide_'+pid).removeClass('layui-icon-subtraction').addClass('layui-icon-addition')
            if( pids.length>0 ) {
                $.each(pids, function(index, value) {
                    if( pid == value ) {
                        pids.splice(index,1);
                    }
                });
            }
            sessionStorage.setItem("pids", pids);
        }
        $('.cate_' + pid).toggle();
    }

    var _pids = sessionStorage.getItem("pids");
    if( _pids != null ) {
        _pids = _pids.split(',');
        $.each(_pids, function(index, value) {
            showHide(value)
        });
    }



    /*操作 下菜单*/
    layui.use(function(){
        // 渲染
        var dropdown = layui.dropdown;
        dropdown.render({
            elem: '.dropdown-btn', // 绑定元素选择器，此处指向 class 可同时绑定多个元素
            data: [{
                title: '添加子权限',
                type: 'add'
            },{
                title: '删除',
                type: 'delete'
            }],
            click: function(data){
                var elem = $(this.elem)
                var id = elem.data('id'); //被选中的ID

                if(data.type === 'add'){
                    layer.open({
                        type: 2
                        ,title: data.title
                        ,content: "{:url('add')}?pid="+id
                        ,area: ['900px', '740px']
                    });
                } else if ( data.type === 'delete' ) {
                    //询问框
                    var tip = "确定要删除此条信息吗？"
                    layer.confirm(tip, {
                        title:"操作提示",
                        icon: 7,
                        btn: ['确定','取消'] //按钮
                    }, function(){
                        var url = "{:url('delete')}";
                        $.get(url,{id:id},function(data){
                            if( data.code === 1 ) {
                                window.location.reload();
                            } else {
                                xn_alert(data.msg);
                            }
                        },'json')
                    }, function(){

                    });
                }
            }
        });
    });

</script>
{/block}